<template>
	<view class="container">
		<view class="border-body">
			<view class="with_top_text1">
				<text>请填写转化信息</text>
				<view class="jilu" @click="jump" v-if="mobile!='正在获取...'">转化记录</view>
			</view>
			<view class="body_pos_re">
				<text class="body_pos_tit">手机号码</text>
				<u--input border="none" class="body_phone_input" readonly placeholderClass="placeholder" type="text"
					fontSize="26rpx" clearable :value='mobile'></u--input>
			</view>
			<view class="body_pos_re">
				<text class="body_pos_tit">我的钻石</text>
				<view class="type">
					<view class="type-item" style="margin-right: 10rpx;">
						<text>{{user_money}}</text>
					</view>
				</view>
			</view>
			<view class="body_pos_re">
				<text class="body_pos_tit">转化金额</text>
				<u--input border="none" @input="checkNum" class="body_phone_input" placeholder="请输入转化金额"
					placeholderClass="placeholder" type="number" fontSize="26rpx" clearable v-model="form.money">
				</u--input>
			</view>
			<view class="body_pos_re" v-if="user_change_sms_enable=='1' && change_open==1">
				<text class="body_pos_tit">验证码</text>
				<u--input border="none" class="body_phone_input" placeholder="请输入验证码" placeholderClass="placeholder"
					type="number" maxlength="6" fontSize="26rpx" clearable v-model="form.code"></u--input>
				<view class="u-demo-block">
					<view class="u-demo-block__content">
						<u-code ref="uCode1" :seconds="sms_time_out" @change="codeChange" keep-running
							change-text="Xs" @start="disabled = true" @end="disabled = false"></u-code>
						<u-button @tap="getCode" :text="tips" size="small" :disabled="disabled" class="body_btn">
						</u-button>
					</view>
				</view>
			</view>
		</view>
		<button type="default"  v-if="mobile!='正在获取...'" :disabled="btnDisabled" @click="confirm()" class="body_btn2">{{con_text}}</button>
	</view>
</template>

<script>
	var validate = require("@/components/validate/validate.js");
	var _this
	export default {
		data() {
			return {
				user_change_sms_enable: '0',
				sms_time_out: 60,
				mobile: '正在获取...',
				user_money: '正在获取...',
				jinbi: '正在获取...',
				change_open:0,
				tips: '',
				con_text:'确认',
				disabled: false,
				btnDisabled: false,
				form: {
					step: 1,
					type:1,
					dfmobile: '',
					money: '',
					code: '',
				},
			}
		},
		onLoad() {
			_this=this
			this.Submit()
		},
		methods: {
			jump(){
				uni.$u.route({
					url:'pages/center/balance/change-list',
				})
			},
			// 输入金额方法
			checkNum(e) {
			    let money = parseFloat(e.replace(/(^\s*)|(\s*$)/g, ""))
				if(money<=0){
					this.$nextTick(() => {
					    this.form.money = '';
					})
					return
				}
			    if (!money) {
			        this.$nextTick(() => {
			            this.form.money = '';
			        })
			        return
			    }
				if(money>parseFloat(this.user_money)){
					this.$nextTick(() => {
					    this.form.money = this.user_money;
					})
					return
				}
				var val = money+""
			    var reg = /[^\d.]/g
			    // 只能是数字和小数点，不能是其他输入
			    val = val.replace(reg, "")
			    // // 保证第一位只能是数字，不能是点
			    val = val.replace(/^\./g, "");
			    // // 小数只能出现1位
			    val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
			    // // 小数点后面保留2位
			    val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
				val = (val.match(/^\d*(\.?\d{0,2})/g)[0]) || ''
			    // console.log(val);
			    this.$nextTick(() => {
			        this.form.money = val;
			    })
			},
			//获取验证码
			codeChange(text) {
				this.tips = text;
			},
			confirm() {
				this.form.step = 2
				this.Submit()
			},
			changeType(type){
				if(_this.form.type==type){
					return
				}
				_this.form.type=type
			},
			async getCode() {
				if (this.$refs.uCode1.canGetCode) {
					const params = {
						mobile: this.mobile,
						scene: 7
					}
					const data = await _this.$post('api/GetCode',params)
					if (data.code == 200) {
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast(data.msg);
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode1.start();
					} else {
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast(data.msg);
					}
				} else {
					uni.$u.toast('请倒计时结束后再发送');
				}
			},
			async Submit() {
				if (this.form.step == 2) {
					let codeRule = {
						// 字段名
						name: 'code',
						rules: ['require', 'integer', 'min:6'],
						errorMsg: {
							require: '请输入验证码',
							integer: '验证码只能为数字',
							min: '验证码为6位'
						}
					}
					var rule = [{
						// 字段名
						name: 'money',
						rules: ['require', 'number'],
						errorMsg: {
							require: '请输入转化金额',
							number: '转化金额只能为数字'
						}
					}];
					if (this.user_change_sms_enable == '1') {
						rule.push(codeRule);
					}
					// 是否全部通过，返回Boolean
					let checked = validate.check(this.form, rule);
					if (!checked) {
						// 获取错误信息
						let err = validate.getError();
						uni.$u.toast(err[0])
						return;
					}
				}
				const data = await _this.$post('api/ZhuanHua',this.form)
				if (data.code == 200) {
					this.$u.toast(data.msg)
					setTimeout(res=>{
						_this.jump()
					},2000)
				} else if (data.code == 10) {
					this.sms_time_out = data.data.sms_time_out
					this.mobile = data.data.mobile
					this.user_money = data.data.user_money+"元"
					this.jinbi = data.data.jinbi+"元"
					this.change_open = data.data.change_open
					this.user_change_sms_enable = data.data.user_change_sms_enable
					if(this.change_open==0){
						this.con_text="钻石转化暂未开放"
						this.btnDisabled=true
					}else{
						this.con_text="确认"
						this.btnDisabled=false
					}
				} else {
					this.$u.toast(data.msg)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 20rpx 20rpx 0 20rpx;

		.border-body {
			border-radius: 20rpx;
			background: #FFFFFF;
			box-shadow: $global-shade;
			padding: 0 20rpx;
			margin-bottom: 20rpx;
			.with_top_text1 {
				font-size: 28rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 80rpx;
				.jilu{
					color: $theme-color;
				}
			}
			.body_pos_re {
				min-height: 90rpx;
				display: flex;
				align-items: center;

				&:not(:last-child) {
					border-bottom: 1px solid #F6F7FB;
				}
				.type{
					display: flex;
					align-items: center;
					.type-item{
						display: flex;
						align-items: center;
						image{
							width: 36rpx;
							margin-right: 5rpx;
						}
						text{
						}
					}
				}

				.body_pos_tit {
					width: 20%;
				}
				.jifen{
					flex: 1;
				}
				.body_phone_input {
					flex: 1;
				}

				.u-demo-block {
					width: 26%;

					.body_btn {
						font-size: 26rpx;
						border-radius: 10px;
						color: $theme-color;
						height: 46rpx;
						border: none;
						background-color: $uni-bg-color;
					}
				}
			}
		}
		.body_btn2 {
			background: $theme-color;
			width: 90%;
			margin: 0 auto;
			border-radius: 40rpx;
			margin-top: 40rpx;
			color: #f6f7fb;
			font-size: 28rpx;
			height: 85rpx;
			line-height: 85rpx;
			font-weight: 300;
			border-radius: 45rpx;
			border: none;
			color: #FFFFFF;
			&::after{
				content: none;
			}
		}
		.body_btn2[disabled]{
			background:rgba($color: #FF5D69, $alpha: 0.5);
			color: #FFFFFF;
			border: none;
		}
	}

	.placeholder {
		font-size: 24rpx;
		color: #ADADAD;
	}
</style>
